<template>
    <div>
        <div class="options-wrapper">
            <div class="search">
                <div>
                    <DatePicker type="year" :value="year" placeholder="年份" style="width: 200px"
                                @on-change="yearChange"></DatePicker>
                </div>
                <Input v-model="studentName"
                       placeholder="学生姓名"
                       style="width: 200px"
                       class="search-input"
                       :search="true"
                       @on-change="search"
                       @on-search="search"
                />
                <div>
                    <Select v-model="option" @on-change="search">
                        <Option v-for="item in optionList" :value="item.id" :key="item.id">{{item.des}}</Option>
                    </Select>
                </div>
            </div>
            <div class="left-options">
                <Button class="title-option" type="primary" @click="downloadMonth()">按月下载</Button>
                <Button class="title-option" type="success" @click="downloadTemplate()">模版下载</Button>
                <Upload action="/api/curricula/upload"
                        :show-upload-list="false"
                        :on-success="handleSuccess">
                    <Button icon="ios-cloud-upload-outline">上传</Button>
                </Upload>
                <Button class="title-option" type="error" @click="deleteAll">清空数据</Button>
                <Button class="title-option" type="success" @click="add">添加</Button>
            </div>
        </div>
        <Table border stripe :columns="columns" :data="data">
            <template slot-scope="{row}" slot="surplusPeriod">
                <span v-if="row.totalPeriod+row.giftPeriod-row.usedPeriod>4">{{row.totalPeriod+row.giftPeriod-row.usedPeriod}}</span>
                <span v-else style="color: red">{{row.totalPeriod+row.giftPeriod-row.usedPeriod}}</span>
            </template>
            <template slot-scope="{row}" slot="status">
                <span v-if="row.status==0" style="color: red">{{type[row.status]}}</span>
                <span v-else>{{type[row.status]}}</span>
            </template>
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 15px" @click="edit(row)">编辑</Button>
                <Button type="warning" size="small" style="margin-right: 15px" @click="resume(row)"
                        v-if="row.status==2">
                    恢复
                </Button>
                <Button type="warning" size="small" style="margin-right: 15px" @click="ending(row)"
                        v-if="row.status!=2">
                    结课
                </Button>
                <Button type="info" size="small" style="margin-right: 15px" @click="monthEdit(row)">课消编辑</Button>
            </template>
        </Table>
        <div class="page">
            <Page :total="total"
                  :current="current"
                  @on-change="change"
                  show-sizer
                  class="page"
                  @on-page-size-change="pageSizeChange"/>
        </div>
        <edit-form :modal="modal" :modify="modify"/>
        <month-form :modal="monthModal" :modify="monthModify"/>
        <month-record :modal="recordModal"/>
    </div>
</template>

<script>
    import EditForm from './EditForm'
    import MonthForm from '../record/MonthForm'
    import MonthRecord from './MonthRecord'
    import {year} from "../../request/utils"

    export default {
        name: "Index",
        created() {
            this.getList();
        },
        components: {
            EditForm,
            MonthForm,
            MonthRecord
        },
        watch: {
            pageSize: function () {
                this.getList()
            },
            year: function () {
                this.getList()
            },
        },
        data() {
            return {
                modal: false,
                modify: '',
                monthModal: false,
                monthModify: '',
                recordModal: false,
                year: year.toString(),
                total: 10,
                pageSize: 10,
                selectIds: [],
                current: 1,
                param: '',
                option: 0,
                studentName: '',
                optionList: [
                    {
                        id: 0,
                        des: "全部"
                    }, {
                        id: 1,
                        des: "待处理"
                    }, {
                        id: 2,
                        des: "不足4小时"
                    }, {
                        id: 3,
                        des: "已结课"
                    }
                ],
                type: {
                    0: '待处理',
                    1: '正常',
                    2: '已结课'
                },
                columns: [
                    {
                        title: '学生名字',
                        key: 'studentName',
                        minWidth: 100,
                    }, {
                        title: '报名时间',
                        key: 'signTime',
                        minWidth: 120,
                    }, {
                        title: '年级',
                        key: 'grade',
                        minWidth: 110,
                    }, {
                        title: '班型',
                        key: 'feather',
                        minWidth: 100,
                    }, {
                        title: '科任老师',
                        key: 'teacher',
                        minWidth: 100,
                    }, {
                        title: '科目',
                        key: 'course',
                        minWidth: 80,
                    }, {
                        title: '咨询老师',
                        key: 'counsel',
                        minWidth: 100,
                    }, {
                        title: '总课时(小时)',
                        key: 'totalPeriod',
                        minWidth: 120,
                    }, {
                        title: '赠送课时',
                        key: 'giftPeriod',
                        minWidth: 100,
                    }, {
                        title: '剩余课时',
                        slot: 'surplusPeriod',
                        minWidth: 100,
                    }, {
                        title: '状态',
                        slot: 'status',
                        minWidth: 80,
                    }, {
                        title: '一月',
                        key: 'jan',
                        minWidth: 80,
                    }, {
                        title: '二月',
                        key: 'feb',
                        minWidth: 80,
                    }, {
                        title: '二月',
                        key: 'feb',
                        minWidth: 80,
                    }, {
                        title: '三月',
                        key: 'mar',
                        minWidth: 80,
                    }, {
                        title: '四月',
                        key: 'apr',
                        minWidth: 80,
                    }, {
                        title: '五月',
                        key: 'may',
                        minWidth: 80,
                    }, {
                        title: '六月',
                        key: 'jun',
                        minWidth: 80,
                    }, {
                        title: '七月',
                        key: 'jul',
                        minWidth: 80,
                    }, {
                        title: '八月',
                        key: 'aug',
                        minWidth: 80,
                    }, {
                        title: '九月',
                        key: 'sep',
                        minWidth: 80,
                    }, {
                        title: '十月',
                        key: 'otc',
                        minWidth: 80,
                    }, {
                        title: '十一月',
                        key: 'nov',
                        minWidth: 80,
                    }, {
                        title: '十二月',
                        key: 'dec',
                        minWidth: 80,
                    }, {
                        title: '备注',
                        key: 'remark',
                        minWidth: 150,
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 250,
                        align: 'center',
                        fixed: 'right'
                    }
                ],
                data: []
            }
        },
        methods: {
            yearChange(date) {
                this.year = date;
            },
            getList() {
                let searchDto = {
                    studentName: this.studentName,
                    year: this.year
                }
                switch (this.option) {
                    case 0:
                        searchDto.status = [1]
                        break;
                    case 1:
                        searchDto.status = [0]
                        break;
                    case 2:
                        searchDto.status = [1]
                        searchDto.remindHour = 4
                        break;
                    case 3:
                        searchDto.status = [2]
                        break
                }
                this.$api.curriculaGetList({
                    pageNum: this.current,
                    pageSize: this.pageSize,
                    searchDto: searchDto
                }).then(res => {
                    this.total = res.total;
                    this.data = res.list;
                })
            },
            add() {
                this.modify = '';
                this.modal = true;
            },
            //编辑
            edit(row) {
                this.modal = true;
                this.modify = {...row};
            },
            //结课
            ending(row) {
                this.$Modal.confirm({
                    title: '确认 ' + row.studentName + ' 结课吗？',
                    onOk: () => {
                        this.$api.curriculaUpdateStatus({id: row.id, status: 2})
                            .then(() => {
                                this.$Message.success('设置成功')
                                this.getList();
                            })
                    }
                })
            },
            //恢复
            resume(row) {
                this.$Modal.confirm({
                    title: '确认 ' + row.studentName + ' 恢复吗？',
                    onOk: () => {
                        this.$api.curriculaUpdateStatus({id: row.id, status: 1})
                            .then(() => {
                                this.$Message.success('恢复成功')
                                this.getList();
                            })
                    }
                })
            },
            //课消编辑（月份）
            monthEdit(row) {
                let item = {...row}
                item.id = ''
                item.curriculaId = row.id
                this.monthModify = item
                this.monthModal = true
            },
            search() {
                this.current = 1;
                this.getList();
            },
            change(num) {
                this.current = num;
                this.getList();
            },
            remove(row) {
                this.$Modal.confirm({
                    title: '确认删除:' + row.name + " 吗？",
                    onOk: () => {
                    }
                })
            },
            //关闭编辑框
            cancel() {
                this.modal = false
                this.recordModal = false
                this.monthModal = false
            },
            course(row) {
                this.$router.push({path: 'course', query: row})
            },
            //模版下载
            downloadTemplate() {
                let a = document.createElement('a')
                a.href = "/api/curricula/download_template"
                a.click();
            },
            //月份下载
            downloadMonth() {
                this.recordModal = true
            },
            //清空数据
            deleteAll() {
                this.$Modal.confirm({
                    title: '确认清空数据吗？清空后无法恢复',
                    onOk: () => {
                        this.$api.curriculaDeleteAll().then(() => {
                            this.getList()
                        })
                    }
                })
            },
            //上传成功
            handleSuccess() {
                this.getList()
            },
            pageSizeChange(size) {
                this.pageSize = size
            }
        }
    }
</script>

<style scoped>
    .options-wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .left-options {
        display: flex;
        align-items: flex-start;
    }

    .search {
        display: flex;
    }

    .search > div:first-child {
        margin-right: 10px;
    }

    .title-option {
        display: inline-block;
        margin-right: 10px;
    }

    .page {
        margin-bottom: 20px;
    }
</style>
